<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>

<!-- *********************** -->
<!--  FORM CREATE PROPERTY   -->
<!-- *********************** -->
<th:block th:fragment="modal-createProperty">

<form id="createPropertyForm"
      class="form-horizontal" th:action="@{properties}"
      action=""
      method="POST" >

 <div class="modal hide fade" id="modalCreateProperty" tabindex="-1" role="dialog"
    aria-labelledby="labelCreateProperty" aria-hidden="true">

  <div class="modal-header">
      <button class="close" data-dismiss="modal">x</button>
      <h4 id="labelCreateProperty">
      <i class="icon-file"></i>&nbsp;
      <span th:text="#{modal.createproperty.title}" >Create Property</span></h4>
   </div>

  <!-- Body -->
  <div class="modal-body" style="height:280px">

    <input type="hidden" name="op" value="createProperty"  />

    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px" id="createPropertyFeatureControlGroup" >
      <label class="control-label" for="name" style="color:#687684;font-style:normal;font-weight:normal;"
        th:text="#{modal.createproperty.featureid}" >FeatureName</label>
      <div class="controls">
        <input type="text" name="featureid" id="featureid"
               style="width:350px;height:18px;color:#00ab8b;background-color:white" readonly="readonly"/>
      </div>
    </div>

    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="name" style="color:#687684;font-style:normal;font-weight:normal;"
        th:text="#{modal.createproperty.propertyname}" >Property Name</label>
      <div class="controls">
        <input type="text" name="name" id="name" style="width:350px;height:18px;color:#008bab;background-color:white" required="required" />
      </div>
    </div>

    <!-- Description -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="pDesc" style="color:#687684;font-style:normal"
             th:text="#{modal.createproperty.description}">Description</label>
      <div class="controls">
        <textarea class="field span4" style="width:350px;color:#008bab"
            name="desc" id="pDesc" rows="2" cols="30"></textarea>
      </div>
    </div>

    <!-- Type -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="pType" style="color:#687684;font-style:normal"
            th:text="#{modal.createproperty.type}" >Type</label>
      <div class="controls" >
        <div class="btn-group">
            <input type="text" name="pType" id="pType" style="width:350px;height:18px;color:#008bab;background-color:white"/>
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown"
                    style="float:right;margin-left:-5px">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-cog icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:350px;font-style:normal;color:#696969">
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyString');javascript:$('#modalCreateProperty #pValue').val('abc');">String</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyBoolean');javascript:$('#modalCreateProperty #pValue').val('true');">boolean</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyInt');javascript:$('#modalCreateProperty #pValue').val('0')">int</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyDouble');javascript:$('#modalCreateProperty #pValue').val('0.0')">double</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyDate');javascript:$('#modalCreateProperty #pValue').val('2015-07-31 23:59')">date</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyCalendar');javascript:$('#modalCreateProperty #pValue').val('2015-07-31 23:59')">calendar</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyLogLevel');javascript:$('#modalCreateProperty #pValue').val('DEBUG')">loglevel</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyBigInteger');javascript:$('#modalCreateProperty #pValue').val('10000000');">BigInteger</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('org.ff4j.property.PropertyBigDecimal');javascript:$('#modalCreateProperty #pValue').val('10000000');">BigDecimal</a></li>
              <li><a href="#" onclick="javascript:$('#modalCreateProperty #pType').val('foo.bar.YourClassProperty');">other</a></li>
            </ul>
         </div>
       </div>
    </div>

    <!-- Value -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="pValue"
             style="color:#687684;font-style:normal;font-weight:normal;"
             th:text="#{modal.createproperty.value}" >Value</label>
      <div class="controls">
        <input type="text" name="pValue" id="pValue"
               style="width:350px;height:18px;color:#008bab;background-color:white"
               required="required" />
      </div>
    </div>

    <!-- Message -->
    <div class="control-group" style="margin-left:50px;float:left">
     <span style="color:#008bab;font-style:italic" th:text="#{modal.createproperty.comment}">
       Please add fixedValues once the property is created
     </span>
    </div>

  </div> <!-- modal body -->

  <div class="modal-footer" >
    <button class="btn btn" data-dismiss="modal">
      <i class="icon-remove" ></i>&nbsp;
      <span th:text="#{modal.button.cancel}">Cancel</span>
    </button>
    <button class="btn btn-green"  type="submit">
      <i class="icon-ok icon-white" ></i>&nbsp;
      <span th:text="#{modal.button.create}">Create</span></button>
  </div>

 </div>
</form>

</th:block>

<!-- ************************* -->
<!--  DELETE PROPERTY MODAL    -->
<!-- ************************* -->
 <th:block th:fragment="modal-deleteProperty">
 <form class="form-horizontal" th:action="@{properties}" action="" method="POST" >
  <div class="modal hide fade" id="modalDeleteProperty" tabindex="-1" role="dialog"
       aria-labelledby="modalDeletePropertyLabel" aria-hidden="true">

    <input type="hidden" name="op" value="deleteProperty"  />

    <div class="modal-header">
      <button class="close" data-dismiss="modal">x</button>
      <h4 id="modalDeletePropertyLabel"><i class="icon-trasht"></i>&nbsp;
      <span th:text="#{modal.deleteproperty.title}" >Delete Property</span></h4>
    </div>

    <div class="modal-body">

       <!-- Message -->
        <div class="control-group" style="margin-left:0px;float:left">
         <span style="color:#ab0000;font-weight:bold" th:text="#{modal.deleteproperty.confirmMessage}">
             Are you sure you want to delete this Property ?
         </span>
        </div>

       <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
        <label class="control-label" for="name"
               style="color:#687684;font-style:normal;font-weight:normal;"
               th:text="#{modal.createproperty.propertyname}" >Property Name</label>
        <div class="controls">
        <input type="text" name="name" id="name"
               style="width:350px;height:18px;color:#008bab;background-color:white"
               readonly="true" />
       </div>
     </div>
    </div>

    <div class="modal-footer">
      <button class="btn btn" data-dismiss="modal">
        <i class="icon-remove" ></i>
        &nbsp;<span th:text="#{modal.button.cancel}">Cancel</span>
       </button>
      <button class="btn btn-green" type="submit">
        <i class="icon-trash icon-white" ></i>
        &nbsp;<span th:text="#{modal.button.delete}">Delete</span>
      </button>
    </div>
  </div>
  </form>
 </th:block>

<!-- *********************** -->
<!--  FORM UPDATE PROPERTY   -->
<!-- *********************** -->

<th:block th:fragment="modal-updateProperty">

<form id="updatePropertyForm"
      class="form-horizontal" th:action="@{properties}" action="" method="POST" >

 <div class="modal hide fade" id="modalEditProperty"
      tabindex="-1" role="dialog" aria-hidden="true">

   <div class="modal-header">
     <button class="close" data-dismiss="modal">x</button>
     <h4 id="myModalLabel">
     <i class="icon-pencil"></i>&nbsp;
     <span th:text="#{modal.editproperty.title}" >Edit Property</span></h4>
   </div>

   <div class="modal-body" style="height:500px">

   <input type="hidden" name="op" value="updateProperty"  />

   <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px" id="updatePropertyFeatureControlGroup" >
      <label class="control-label" for="name" style="color:#687684;font-style:normal;font-weight:normal;"
        th:text="#{modal.editproperty.featureid}" >FeatureName</label>
      <div class="controls">
        <input type="text" name="featureid" id="featureid"
               style="width:350px;height:18px;color:#00ab8b;background-color:white" readonly="readonly"/>
      </div>
    </div>

    <!-- Name -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="name" style="color:#687684;font-style:normal;font-weight:normal;"
        th:text="#{modal.editproperty.propertyname}" >Property Name</label>
      <div class="controls">
        <input type="text" name="name" id="name"
        style="width:350px;height:18px;color:#008bab;background-color:white" readonly="readonly" />
      </div>
    </div>

    <!-- Description -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="pDesc" style="color:#687684;font-style:normal"
             th:text="#{modal.editproperty.description}">Description</label>
      <div class="controls">
        <textarea class="field span4" style="width:350px;color:#008bab"
            name="desc" id="pDesc" rows="2" cols="30"></textarea>
      </div>
    </div>

    <!-- Type -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="pType" style="color:#687684;font-style:normal"
             th:text="#{modal.editproperty.type}" >Type</label>
      <div class="controls" >
        <div class="btn-group">
            <input type="text" name="pType" id="pType" style="width:350px;height:18px;color:#008bab;background-color:white"/>
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown"
                    style="float:right;margin-left:-5px">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-cog icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:350px;font-style:normal;color:#696969">
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyString');javascript:$('#modalEditProperty #pValue').val('abc');">String</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyBoolean');javascript:$('#modalEditProperty #pValue').val('true');">boolean</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyInt');javascript:$('#modalEditProperty #pValue').val('0')">int</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyDouble');javascript:$('#modalEditProperty #pValue').val('0.0')">double</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyDate');javascript:$('#modalEditProperty #pValue').val('2015-07-31 23:59')">date</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyCalendar');javascript:$('#modalEditProperty #pValue').val('2015-07-31 23:59')">calendar</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyLogLevel');javascript:$('#modalEditProperty #pValue').val('DEBUG')">loglevel</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyBigInteger');javascript:$('#modalEditProperty #pValue').val('10000000');">BigInteger</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('org.ff4j.property.PropertyBigDecimal');javascript:$('#modalEditProperty #pValue').val('10000000');">BigDecimal</a></li>
              <li><a href="#" onclick="javascript:$('#modalEditProperty #pType').val('foo.bar.YourClassProperty');">other</a></li>
            </ul>
         </div>
       </div>
    </div>

    <!-- Value -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="pValue"
             style="color:#687684;font-style:normal;font-weight:normal;"
             th:text="#{modal.editproperty.value}" >Value</label>
      <div class="controls" id="div-value-property">
        <input type="text" name="pValue" id="pValue"
               style="width:350px;height:18px;color:#008bab;background-color:white"
               required="required" />
      </div>
    </div>

    <!-- FixedValues -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px" id="updatePropertyFixedValueControlGroup">
      <label class="control-label" for="pValue"
             style="color:#687684;font-style:normal;font-weight:normal;"
             th:text="#{modal.editproperty.fixedValues}">FixedValue</label>
      <div class="controls">
      <table class="table table-bordered table-condensed">
        <tbody id="modalEditPropertyFixedValues">
        </tbody>
        </table>
      </div>
    </div>

   </div>

   <div class="modal-footer" >
    <button class="btn btn" data-dismiss="modal">
      <i class="icon-remove" ></i>&nbsp;
      <span th:text="#{modal.button.cancel}">Cancel</span>
    </button>
    <button class="btn btn-green" type="submit">
      <i class="icon-ok icon-white" ></i>&nbsp;
      <span th:text="#{modal.button.validate}">Create</span></button>
  </div>

  </div>

</form>

 <script type="text/javascript" >

    $(document).on("click", ".open-EditPropertyDialog", function () {
        ff4j_updateModalEditProperty($(this).data('id'));
    });

    $(document).on("click", ".open-DeletePropertyDialog", function () {
    	ff4j_updateModalDeleteProperty($(this).data('id'));
    });

    $(document).on("click", ".open-EditFeaturePropertyDialog", function () {
    	var featureId    = $(this).data('featureid');
    	var propertyName = $(this).data('propertyname');
    	var modalEditProperty = $("#modalEditProperty");
        $("#updatePropertyFeatureControlGroup").show();
        // Edition of fixedValue for properties related on feature is disabled : Should recreate all create, delete, update, generation HTML
        $("#updatePropertyFixedValueControlGroup").hide();
        modalEditProperty.find("#name").val(propertyName);
        modalEditProperty.find("#featureid").val(featureId);
        // Fetch information from the feature
        $.get('api/features/' + featureId, function(myFeature) {
           var myProperty = myFeature.customProperties[propertyName];
           modalEditProperty.find("#pDesc").val(myProperty.description);
           modalEditProperty.find("#pType").val(myProperty.type);
           modalEditProperty.find("#pValue").val(myProperty.value);
        });
    });

    $(document).on("click", ".open-createPropertyDialog", function () {
        $(".modal-body #name").val('');
        $(".modal-body #pDesc").val('');
        $(".modal-body #pType").val('');
        $(".modal-body #pValue").val('');
        var featId = $(this).data('featureid');
        if(!featId){
             // Hide the FeatureName control
             $("#createPropertyFeatureControlGroup").hide();
         } else {
             $("#createPropertyFeatureControlGroup").show();
             $(".modal-body #featureid").val(featId);
         }
     });

    $(document).ready(function() {
        $('#updatePropertyForm').on('submit', function(e) {
            // do something
            var featId = $("#updatePropertyForm").find(".modal-body #featureid").val();
            if(featId == "" || featId == null) {
                e.submit();
            } else {
                e.preventDefault();
                var $this = $(this);

                // invoke controller only
                $.ajax({
                  url: $this.attr('action'),
                  type: $this.attr('method'),
                  data: $this.serialize(),
                  async: false,
                  success: function(html) {}
                });

                // Update modal hide modal top
                $('#modalEditProperty').modal("hide");
                ff4j_drawCustomProperties(featId);
            }
        });
    });

     $(document).ready(function() {
        $('#createPropertyForm').on('submit', function(e) {
        var featId = $(".modal-body #featureid").val();
        if(featId == "" || featId == null) {
            e.submit();

        } else {
            e.preventDefault();
            var $this = $(this);

            // invoke controller only
            $.ajax({
              url: $this.attr('action'),
              type: $this.attr('method'),
              data: $this.serialize(),
              async: false,
              success: function(html) {}
             });

             $("#modalCreateProperty").modal("hide");
             ff4j_drawCustomProperties(featId);
        }
       });
     });

 </script>

</th:block>

<!-- ********************* -->
<!-- MODAL RENAME PROPERTY -->
<!-- ********************* -->
<th:block th:fragment="modal-rename">

<form class="form-horizontal" th:action="@{properties}" action="" method="POST" >

  <div class="modal hide fade" id="modalRenameProperty" tabindex="-1"
       role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-header">
      <button class="close" data-dismiss="modal">x</button>
      <h4 id="myModalLabel">
      <i class="icon-th-list icon-white"></i>&nbsp;
      <span th:text="#{modal.renameproperty.title}" >Rename Property</span>
      </h4>
    </div>

    <div class="modal-body" style="height:120px">

    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="group" style="color:#687684;font-style:normal">
        <span th:text="#{modal.renameproperty.list}" >Property List</span>
      </label>
        <div class="controls">
          <div class="btn-group">
            <input type="text" name="name" id="name" style="width:350px;height:18px;color:#008bab" />
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown" style="float:right;margin-left:-5px">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-inbox icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:350px;font-style:normal;color:#696969">
              <li th:each="myProperty : ${listOfProperties}">
                <a th:onclick="javascript:$('#modalRenameProperty #name').val([[${myProperty.name}]]);">
                  <span th:text="${myProperty.name}">Property</span>
                </a>
               </li>
            </ul>
          </div> <!-- btn-group -->
        </div> <!-- controls -->
      </div> <!-- control-group -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="uid"
        style="color:#687684;font-style:normal;font-weight:normal;" th:text="#{modal.renameproperty.new}" >New Name </label>
      <div class="controls">
        <input type="text" name="newname" id="newname"
            style="width:350px;height:18px;color:#008bab;background-color:white" required="required" />
      </div>
    </div>
    </div>

     <div class="modal-footer" >
    <button class="btn btn" data-dismiss="modal">
      <i class="icon-remove" ></i>&nbsp;
      <span th:text="#{modal.button.cancel}">Cancel</span>
    </button>
    <button class="btn btn-green" type="submit">
      <i class="icon-ok icon-white" ></i>&nbsp;
      <span th:text="#{modal.button.validate}">Validate</span></button>
  </div>

   <input type="hidden" name="op" value="renameProperty"  />

  </div>
</form>


</th:block>

<!-- ******************** -->
<!-- MODAL COPY PROPERTY  -->
<!-- ******************** -->
<th:block th:fragment="modal-copy">

<form class="form-horizontal" th:action="@{properties}" action="" method="POST" >

  <div class="modal hide fade" id="modalCopyProperty" tabindex="-1"
       role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-header">
      <button class="close" data-dismiss="modal">x</button>
      <h4 id="myModalLabel">
      <i class="icon-th-list icon-white"></i>&nbsp;
      <span th:text="#{modal.copyproperty.title}" >Copy Property</span>
      </h4>
    </div>

    <div class="modal-body" style="height:120px">

    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="group" style="color:#687684;font-style:normal">
        <span th:text="#{modal.copyproperty.list}" >Property List</span>
      </label>
        <div class="controls">
          <div class="btn-group">
            <input type="text" name="name" id="name" style="width:350px;height:18px;color:#008bab" />
            <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown" style="float:right;margin-left:-5px">
              <span class="caret"></span>
              <span class="sr-only"><i class="icon-inbox icon-white" ></i></span>
            </button>
            <ul class="dropdown-menu" role="menu" style="width:350px;font-style:normal;color:#696969">
              <li th:each="myProperty : ${listOfProperties}">
                <a th:onclick="javascript:$('#modalCopyProperty #name').val([[${myProperty.name}]]);">
                  <span th:text="${myProperty.name}">Property</span>
                </a>
               </li>
            </ul>
          </div> <!-- btn-group -->
        </div> <!-- controls -->
      </div> <!-- control-group -->
    <div class="control-group" style="margin-left:0px;float:left;margin-left:-45px">
      <label class="control-label" for="uid"
        style="color:#687684;font-style:normal;font-weight:normal;" th:text="#{modal.copyproperty.new}" >New Name </label>
      <div class="controls">
        <input type="text" name="newname" id="newname"
            style="width:350px;height:18px;color:#008bab;background-color:white" required="required" />
      </div>
    </div>
    </div>

     <div class="modal-footer" >
    <button class="btn btn" data-dismiss="modal">
      <i class="icon-remove" ></i>&nbsp;
      <span th:text="#{modal.button.cancel}">Cancel</span>
    </button>
    <button class="btn btn-green" type="submit">
      <i class="icon-ok icon-white" ></i>&nbsp;
      <span th:text="#{modal.button.validate}">Validate</span></button>
  </div>

   <input type="hidden" name="op" value="copyProperty"  />

  </div>
</form>


</th:block>



</body>
</html>
